<template>
  <div class="doubleBar" id="doubleBar"> </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  mounted() {
    this.initChart()
  },
  methods: {
    initChart() {
      const chart = echarts.init(document.getElementById('doubleBar'));
      window.addEventListener('resize', () => {
        chart.resize();
      })
      const option = {
        tooltip: {},
        legend: {
          data:['上季度','当前季度'],
          top: 10,
          right: 10,
          itemWidth: 10,
          itemHeight: 10,
          textStyle: {
            fontSize: 12
          }
        },
        grid: {
          top: '10%',
          right: '5%',
          left: '5%',
          bottom: '10%',
          containLabel: true,
        },
        xAxis: {
          data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
        },
        yAxis: {
          name: '对比上个季度',
          type: 'value',
          splitLine: {
            show: true,
            lineStyle: {
              color: '#ccc',
              type: 'dashed'
            }
          },
          axisLabel: {
            formatter: '{value}'
          },
          itemStyle: {
            color: '#f5a623',
            fontSize: 14
          }
        },
        series: [
          {
            name: '上季度',
            type: 'bar',
            barWidth: "20%",
            data: [5, 20, 36, 10, 10, 20]
          },
          {
            name: '当前季度',
            type: 'bar',
            barWidth: "20%",
            data: [10, 20, 36, 10, 10, 20]
          }
        ]
      }
      chart.setOption(option);
    }
  }
}
</script>

<style lang="scss" scoped>
.doubleBar {
  height: 100%;
  width: 50%;
}
  
</style>